<template>
  <div class="component__live_card" @click="toPath(detail.id)">
    <div :class="['live-item', kl_md.KLGL == 1 ? 'gelin-card' : '']">
      <img class="live-bg" :src="detail.iconPath" alt />
      <div class="item-box" v-if="isLiveStart">
        <div class="tags">
          <div class="tags-left">
            <img src="/img/mobile/liveing1.gif" alt />
            <span style="margin-left:.1rem;">直播中</span>
          </div>

          <!-- <span
            v-if="this.videoVoList.length > 0"
          >{{formatLiveTime(this.videoVoList[0]['liveStartTime'])}}</span>-->
          <span v-if="this.videoVoList.length > 0">{{ liveTime }}</span>
        </div>
        <div class="chapter-name">
          <span v-if="this.videoVoList.length > 0">{{
            this.videoVoList[0]["chapterName"]
          }}</span>
        </div>
        <div class="teacher">
          <div class="left-img">
            <img :src="this.course.avatar" alt />
          </div>
          <div>{{ detail.acName }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { getLiveCourseChapter } from "~/api/course";
export default {
  props: ["detail", "isClearTimes"],
  components: {},
  data() {
    return {
      course: {},
      videoVoList: [],
      timer: null,
      liveTime: null
    };
  },
  computed: {
    ...mapState({
      is_ios(state) {
        return state.is_ios;
      },
      is_in_wechat(state) {
        return state.is_in_wechat;
      },
      kl_md(state) {
        return state.kl_md;
      },
      is_wechat_ios_limit(state) {
        return state.is_wechat_ios_limit;
      }
    }),
    is_show_price() {
      if (this.is_wechat_ios_limit) {
        return this.is_ios && this.is_in_wechat;
      } else {
        return false;
      }
    }
  },
  watch: {
    isClearTimes() {
      this.isShowClearTimes();
    }
  },

  methods: {
    toPath(id) {
      this.$router.push({
        path: "/m/course-detail",
        query: {
          id
        }
      });
    },
    isShowClearTimes() {
      // console.log("isClearTimes变化",this.isClearTimes)
      if (this.isClearTimes) {
        clearInterval(this.timer); // 清除定时器
        this.timer = null;
      } else if (this.videoVoList.length > 0) {
        this.timer = setInterval(() => {
          this.formatLiveTime(this.videoVoList[0]["liveStartTime"]);
        }, 1000);
      }
    },
    formatLiveTime(timestamp) {
      var newTime = new Date(new Date().getTime() - timestamp);
      var h = newTime.getHours();
      var mm = newTime.getMinutes();
      var s = newTime.getSeconds();
      var add0 = m => {
        return m < 10 ? "0" + m : m;
      };
      // console.log("直播时间", add0(h) + ":" + add0(mm) + ":" + add0(s));
      this.liveTime = add0(h) + ":" + add0(mm) + ":" + add0(s);
      return add0(h) + ":" + add0(mm) + ":" + add0(s);
    },
    isLiveStart() {
      if (this.videoVoList.length > 0) {
        return this.videoVoList[0].liveStartTime > new Date().getTime();
      } else {
        return false;
      }
    },
    async getCourseChapter(courseId) {
      let result = await getLiveCourseChapter({ courseId });
      if (result && result.data.code == 200) {
        this.course = result.data.data;
        this.videoVoList = result.data.data.videoVoList;
        // this.liveTime = this.videoVoList[0]["liveStartTime"];
        // this.timer = setInterval(() => {
        //   this.formatLiveTime(this.videoVoList[0]["liveStartTime"]);
        // }, 1000);
        this.isShowClearTimes();
        console.log("直播课程章节=====", this.course);
      } else {
        this.$Message.error(this.$t("locale.pc.index.t9"));
      }
    }
  },
  created() {
    this.getCourseChapter(this.detail.id);

    console.log(this.detail);
  },
  mounted() {},
  activated() {}
};
</script>
<style lang="scss" scoped>
.component__live_card {
  // flex-shrink: 0;
  .live-item {
    flex-shrink: 0;
    width: 3.6rem;
    height: 2.4rem;
    border-radius: 0.1rem;
    background: #ffffff;
    margin-right: 0.2rem;
    overflow: hidden;
    position: relative;
    .live-bg {
      filter: blur(0.03rem);
      -webkit-filter: blur(0.03rem);
    }
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
    .item-box {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
      .tags {
        margin: 0.1rem 0 0 0.1rem;
        width: 3rem;
        height: 0.5rem;
        // background-image: linear-gradient(0deg, #5b96ff 23%, #5ce9ff 100%),
        // linear-gradient(#5b96ff, #5b96ff);
        background: var(--theme-color);
        box-shadow: 0px 0px 9px 0px rgba(42, 47, 51, 0.4);
        border-radius: 0px 22px 22px 21px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.2rem;
        color: #fff;
        font-size: 0.24rem;

        .tags-left {
          display: flex;
          align-items: center;

          img {
            width: 0.3rem;
            height: 0.2rem;
            display: block;
          }
        }
      }
      .chapter-name {
        color: #fff;
        padding: 0.1rem 0rem;
        margin: 0 0.1rem;
        line-height: 0.4rem;
        height: 0.93rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        font-size: 0.3rem;
        border-bottom: 0.01rem solid #e3e4e6;
      }
      .teacher {
        margin: 0.1rem 0.1rem 0;
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 0.3rem;
        .left-img {
          width: 0.6rem;
          height: 0.6rem;
          background: #ffffff;
          border: 1px solid #ffffff;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 0.1rem;
        }
      }
    }
  }
  .live-item.gelin-card {
    height: 4.788rem;
    .chapter-name {
      color: #fff;
      padding: 0.1rem 0rem;
      margin: 0 0.1rem;
      line-height: 0.4rem;
      height: 1.7rem;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      font-size: 0.3rem;
      border-bottom: 0.01rem solid #e3e4e6;
    }
    .teacher {
      margin: 0.1rem 0.1rem 0;
    }
  }
}
</style>
